<template>
	<view class="cntColumn">
		<ttBar title="活动详情" :bgColor="titleBg" :color="wordsColor" :showZhanwei="false" titleAlign="left" :isShare="isShare">
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" :style="{ 'background-color': btnBg }"></text>
			</template>
			<!-- <template v-slot:rightCnt>
				<text class="iconfont icon-cart rIcon" :style="{ 'background-color': btnBg }" @tap="toCar"></text>
				<text class="iconfont icon-home rIcon" :style="{ 'background-color': goodData.isDelete ? '#ffffff' : btnBg }" @tap="toHome"></text>
			</template> -->
		</ttBar>

		<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>
		<!-- <groupRule :groupDt="groupDt"></groupRule> -->
		<view class="daojishibox">
			<view class="leftbox">
				<view class="topnum">
					<text style="font-size: 30rpx;">￥</text>
					<text style="font-size: 40rpx;">{{ groupDt.spellPrice }}</text>
				</view>
				<view class="bottomnum">
					<view class="pinnum">
						<text style="color: #ff6b44;">{{ groupDt.spellNumber }}</text>
					</view>
					<view class="renmun"><text>人拼</text></view>
				</view>
			</view>
			<view class="rightbox">
				<view class="daojishibtn">
					<view class="end" >
						<text v-if="showzhanshiTime">距开始</text>
						<text v-else>距结束</text>
						<text style="color: red;">{{ day }}</text>
						<text>天</text>
					</view>
					
					<view class="time">
						<text>{{ hour }}</text>
					</view>
					<view class="maohao"><text>:</text></view>
					<view class="time">
						<text>{{ min }}</text>
					</view>
					<view class="maohao"><text>:</text></view>
					<view class="time">
						<text>{{ sec }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 价格与标题 -->
		<goodInfo :goodData="goodData" :showPt="false" :showPrice="false"></goodInfo>
		<!-- 课程tag -->
		<!-- <goodLabels :labels="goodData.labels" v-if="goodData.labels.length>0"></goodLabels> -->

		<!-- 课程保障 -->
		<goodGuarantee :protectList="goodData.protectList"></goodGuarantee>
		<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
			
			<newlogin @tap="close" v-if="flage"></newlogin>
			<view class="tankuangbox" v-else>
				<view class="cbox" @tap="close()"><text class="iconfont icon-guanbi1"></text></view>
				<view class="tankuangtop"><text>正在拼单</text></view>
				<view class="bottomnum">
					<scroll-view scroll-y="true" style="height: 610rpx; overflow: auto;">
					<view class="userlist" v-for="(item, index) in newptlistgd" :key="index">
						<view class="userleft">
							<image :src="item.groupUsers.pic" mode=""></image>
							<view class="">
								<view class="" style="display: flex; align-items: center;height: 42rpx;">
									<view class="" style="height: 100%;">
										<text style="font-size: 26rpx;line-height: 42rpx;">{{ item.groupUsers.nickname }}</text>
									</view>
									<view class="" style="color: #4e4e4e;font-size: 22rpx;margin-left: 5rpx;height: 100%;">
										<text style="line-height: 42rpx;">还差</text>
										<text style="color: red;line-height: 42rpx;">{{ item.num }}</text>
										<text style="line-height: 42rpx;">人</text>
									</view>
								</view>
								<newtime :item="item"></newtime>
							</view>
						</view>
						<view class="userright">
							<view class="shaouser"></view>
							<view class="cantuan"><text style="font-size: 28rpx;" @tap="addGroup(item.groupUsers.id, item.groupUsersIds)">去参团</text></view>
						</view>
					</view>
										
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<view class="ptnum" v-if="newptlist.length > 0">
			<view class="topnum">
				<view class="leftbox" style="padding-left: 20rpx;">
					<text class="iconfont icon-zhuyaorenyuan" style="color: #f5a200; font-size: 28rpx;"></text>
					<text style="font-size: 28rpx;">{{ spellsize }}人在拼团，可直接参与</text>
				</view>
				<view class="rightbox" style="font-size: 22rpx;color: #ccc;padding-right: 20rpx;" @tap="opennew">
					<text>查看更多</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="bottomnum">
				<view class="userlist" v-for="(item, index) in newptlist" :key="index">
					<view class="userleft">
						<image :src="item.groupUsers.pic" mode=""></image>
						<text style="font-size: 28rpx;">{{ item.groupUsers.nickname }}</text>
					</view>
					<view class="userright">
						<view class="shaouser">
							<view class="" style="color: #4e4e4e; font-weight: bold;font-size: 26rpx;">
								<text>还差</text>
								<text style="color: red;">{{ item.num }}</text>
								<text>人成团</text>
							</view>
							<newtime :item="item"></newtime>
						</view>
						<view class="cantuan"><text style="font-size: 28rpx;" @tap="addGroup(item.groupUsers.id, item.groupUsersIds)">去参团</text></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品评论 -->
		<goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate>

		<!-- 店铺卡片 -->
		<shop-card :shopInfo="goodData.store"></shop-card>

		<courseParameter :goodParameter="goodData" :shichang="shichang"></courseParameter>

		<view class="htmlBox">
			<!-- 图文详情 -->
			<text class="parameterTitle">课程详情</text>
			<goodCnt :goodData="goodData"></goodCnt>
			<!-- 须知 -->
			<goodXuzhi :goodData="goodData"></goodXuzhi>
		</view>
		<newpintuanbottom :resouceData="groupDt"></newpintuanbottom>

		<shareAction ref="shareAction"></shareAction>
		<qrcode-poster ref="poster" :title="goodData.name.substr(0, 12)" :headerImg="goodData.img" :price="groupDt.spellPrice"></qrcode-poster>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
import goodSwiper from '@/pagesA/components/goodSwiper/goodSwiper.vue';
import statusBar from '@/components/statusBar/statusBar.vue';
import goodEvaluate from '@/pagesA/components/goodEvaluate/goodEvaluate.vue';
import courseParameter from '@/pagesA/components/courseParameter/courseParameter.vue';
import goodLabels from '@/pagesA/components/goodItem/goodLabels.vue';
import goodGuarantee from '@/pagesA/components/goodItem/goodGuarantee.vue';
import goodInfo from '@/pagesA/components/goodItem/goodInfo.vue';
import goodCnt from '@/pagesA/components/goodItem/goodCnt.vue';
import goodXuzhi from '@/pagesA/components/goodItem/goodXuzhi.vue';
import newpintuanbottom from '@/pagesA/components/goodItem/newpintuanbottom.vue';
import COMM from '@/common/common.js';
import shopCard from '@/pagesA/components/shopCard/shopCard.vue';
import groupRule from '@/pagesA/components/groupList/groupRule.vue';
import shareAction from '@/pagesA/components/shareAction/shareAction.vue';
import newtime from '@/pagesA/components/newtime/newtime.vue';
import QrcodePoster from '../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	components: {
		ttBar,
		goodSwiper,
		statusBar,
		goodEvaluate,
		courseParameter,
		shopCard,
		groupRule,
		shareAction,
		goodLabels,
		goodGuarantee,
		goodInfo,
		goodCnt,
		goodXuzhi,
		newpintuanbottom,
		newtime,
		QrcodePoster
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin,
			initInfo: state => state.sys.initInfo,
			locationCity: state => state.map.locationCity
		})
	},
	data() {
		return {
			videoHeight: uni.getSystemInfoSync().screenWidth,
			titleBg: 'rgba(255,255,255,0)',
			wordsColor: '#FFFFFF',
			btnBg: 'rgba(0,0,0,0.5)',
			goodData: {
				name: '课程名称',
				price: 0,
				labels: [],
				leftSeconds: 10,
				stock: 1
			},
			shopInfo: {},
			dotsStyles: {
				width: 6,
				height: 4,
				bottom: -10,
				backgroundColor: '#c5c3c6',
				border: 'none',
				selectedBackgroundColor: '#ff6902',
				selectedBorder: 'none',
				borderRadius: 2
			},
			shichang: '',
			id: 0,
			gid: 0,
			groupDt: {
				level1: 1,
				level2: 2,
				level3: 3,
				course: {
					price: 0
				}
			},
			isShare: 0,
			day: '',
			hour: '',
			min: '',
			sec: '',
			newid: 0,
			newptlist: [],
			newptlistgd: [],
			spellsize: 0,
			type: 0,
			showzhanshiTime:false,
			flage:false
			
			
		};
	},
	methods: {
		opennew(){
			this.flage =false;
			this.open();
		},
		open() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.open();
			
		},
		close() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.close();
			
		},
		moveHandle(){
			return;
		},

		getData() {
			uni.showLoading({
				title: '正在加载中'
			});
			if (uni.getStorageSync('toGood')) {
				this.goodData = uni.getStorageSync('toGood');
			}
			let ActivitySpellGroup = { id: this.gid, userId: this.isLogin ? this.userInfo.userId : 0 };
			this.$store.dispatch('spellGroupDetails', ActivitySpellGroup).then(res => {
				this.groupDt = res.data.data;
				this.goodData = res.data.data.course;

				this.shichang = COMM.getTm(this.goodData.time);
				this.shopInfo = res.data.data.course.store;
				this.newid = res.data.data.id;
				this.showSpellList();
				this.showSpellListgd();
				uni.hideLoading();
			});
		},
		daojishi() {
			//倒计时
			let _end = new Date(Date.parse(this.groupDt.endTime.replace(/-/g, '/'))); //活动结束时间
			var _kaishi = new Date(this.groupDt.startTime.replace(/-/g, '/'));
			var _now = new Date(); 
			var _zhanshiTime = _kaishi.getTime() - _now.getTime();
			//当前时间
			var _leftTime = _end.getTime() - _now.getTime();
			
			if(_zhanshiTime>0){
				this.showzhanshiTime = true;
				let _day = Math.floor(_zhanshiTime / (1000 * 60 * 60 * 24));
				let _hour = Math.floor((_zhanshiTime / (1000 * 60 * 60)) % 24);
				let _min = Math.floor((_zhanshiTime / (1000 * 60)) % 60);
				let _sec = Math.floor((_zhanshiTime / 1000) % 60);
				this.day = _day > 9 ? _day : '0' + _day;
				
				this.hour = _hour > 9 ? _hour : '0' + _hour;
				
				this.min = _min > 9 ? _min : '0' + _min;
				
				this.sec = _sec > 9 ? _sec : '0' + _sec;
			}else{
				this.showzhanshiTime = false;
				if (_leftTime > 0) {
					let _day = Math.floor(_leftTime / (1000 * 60 * 60 * 24));
					let _hour = Math.floor((_leftTime / (1000 * 60 * 60)) % 24);
					let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
					let _sec = Math.floor((_leftTime / 1000) % 60);
					this.day = _day > 9 ? _day : '0' + _day;
				
					this.hour = _hour > 9 ? _hour : '0' + _hour;
				
					this.min = _min > 9 ? _min : '0' + _min;
				
					this.sec = _sec > 9 ? _sec : '0' + _sec;
				} else {
					this.day = '00';
					this.hour = '00';
					this.min = '00';
					this.sec = '00';
				}
			}
			
		},

		showSpellList() {
			this.$store
				.dispatch('showSpellList', {
					id: this.newid
				})
				.then(res => {
					this.newptlist = res.data.data;
					if (this.newptlist.length > 2) {
						var arrOld = [];
						for (var i = 0; i < 2; i++) {
							var _num = Math.floor(Math.random() * this.newptlist.length);
							var mm = this.newptlist[_num];
							this.newptlist.splice(_num, 1);
							arrOld.push(mm);
						}

						this.newptlist = arrOld;
					}
					this.spellsize = res.data.spellsize;
				});
		},
		showSpellListgd() {
			this.$store
				.dispatch('showSpellList', {
					id: this.newid
				})
				.then(res => {
					this.newptlistgd = res.data.data;
				});
		},

		NEWstatisticsHeat() {
			this.$store
				.dispatch('NEWstatisticsHeat', {
					id: this.gid,
					type: this.type
				})
				.then(res => {
					console.log(res);
				});
		},
		// 开团
		addGroup(id, groupUsersIds) {
			if (this.isLogin) {
				console.log(groupUsersIds);
				for (var i = 0; i < groupUsersIds.length; i++) {
					if (this.userInfo.userId == groupUsersIds[i].userId) {
						uni.showToast({
							title: '您已经参与了此次拼团!',
							icon: 'none'
						});
					} else {
						this.$set(this.groupDt.course, 'spellPrice', this.groupDt.spellPrice);
						let cfmArr = [this.groupDt.course];
						uni.setStorage({
							key: 'confirmList',
							data: cfmArr,
							complete: () => {
								this.toPage({
									url: 'confirmOrder',
									newisGroup: 2,
									newgid: id,
									newpt: this.gid
								});
							}
						});
					}
				}
			} else {
				// this.toPage({
				// 	url: 'login'
				// });
				this.flage = true;
				this.open();
			}
		},

		toCar() {
			if (this.isLogin) {
				this.toPage('car');
			} else {
				this.toPage({
					url: 'login',
					to: 'car'
				});
			}
		},

		toHome() {
			this.toPage({
				url: 'index'
			});
		},
		// 分享功能
		showPoster() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let _href = '';
			if (this.isLogin) {
				_href = 'url=goodspintuan&id=' + this.gid + '&uid=' + this.userInfo.userId;
			} else {
				_href = 'url=goodspintuan&id=' + this.gid;
			}
			this.$store.dispatch('apiGetMPToken').then(res => {
				this.$store
					.dispatch('apiGetMpCodeImg', {
						token: res.data.data.access_token,
						page: 'pages/index/index',
						scene: _href,
						width: 280
					})
					.then(imgRes => {
						if (imgRes.data.code == 1) {
							this.type = 1;
							this.NEWstatisticsHeat();
							this.$refs.poster.showCanvas(imgRes.data.data);
						} else {
						}
					});
			});
		}
	},
	onLoad(cfm) {
		// 监听页面返回事件
		uni.$on('update', function(data) {
			// console.log(data);
		});
		this.gid = cfm.id;
		this.isShare = cfm.isShare ? parseInt(cfm.isShare) : 0;
		this.getData();
		setInterval(() => {
			this.daojishi();
		}, 1000);
		this.type = 2;
		this.NEWstatisticsHeat();
		
		// 自动登录
		// 判断能不能获取到本地存储的'token'		
		if (uni.getStorageSync('token')) {	
			this.$store.dispatch("apiUserAutoLogin", {
				token: uni.getStorageSync('token')
			}).then(res => {
				
				setTimeout(() => {
					this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
						setTimeout(() => {
							this.$store.dispatch("timEditInfo", {
								nick: res.data.data.nickname,
								role: 2
							})
						}, 1000)
					})
					let _data={
							userId:res.data.data.userId,
							city:parseInt(this.locationCity.adcode),
							version:'MP'
						};
					this.$store.dispatch("eidtUserInfo",_data)
				}, 500)
			}).catch(res => {
				 
			})
		}
	},
	onShow() {
		this.getData();
	},
	onUnload() {},
	onShareAppMessage(res) {
		this.type = 1;
		this.NEWstatisticsHeat();
		let _href = '';
		if (this.isLogin) {
			_href = 'pagesA/goodspintuan/goodspintuan?id=' + this.gid + '&uid=' + this.userInfo.userId + '&isShare=1';
		} else {
			_href = 'pagesA/goodspintuan/goodspintuan?id=' + this.gid + '&isShare=1';
		}
		return {
			title: '好课拼购 ' + this.goodData.name,
			path: _href,
			imageUrl: this.goodData.img
		};
	},
	onPageScroll(e) {
		var _this = this;
		if (e.scrollTop > this.videoHeight) {
			this.titleBg = 'rgba(255,255,255,1)';
			this.wordsColor = '#000000';
			this.btnBg = 'rgba(255,255,255,1)';
		} else {
			this.titleBg = 'rgba(255,255,255,0)';
			this.wordsColor = '#FFFFFF';
			this.btnBg = 'rgba(0,0,0,0.5)';
		}
		uni.$on('loginNext', () => {});
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			this.type = 2;
			this.NEWstatisticsHeat();
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
page {
	background-color: #f4f4f4;
}
.cntColumn {
	display: flex;
	flex-direction: column;
}

/* #ifdef MP */
.titleBg {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.goodTitle {
	position: fixed;
	width: 100%;
	height: 90upx;
	line-height: 90upx;
	text-align: center;
	left: 0;
	padding-right: 28%;
	box-sizing: border-box;
	font-size: 36upx;
}

.backBtn {
	position: fixed;
	width: 60upx;
	height: 60upx;
	margin-top: 16upx;
	left: 28upx;
}

.carBtn {
	position: fixed;
	width: 60upx;
	height: 60upx;
	margin-top: 16upx;
	right: 28%;
}

/* #endif */

.mainCnt {
	padding: 0 28upx;
}

.ruleBox {
	display: flex;
	background-color: #ffffff;
	padding: 20upx 28upx;
	border-bottom: 13upx solid #f4f4f4;
	font-size: 32upx;
	align-items: center;
	.title {
		font-size: 30rpx;
		color: #2c2c2c;
		margin-right: 30upx;
	}
	.ruleText {
		font-size: 24upx;
		flex-grow: 1;
		text-align: right;
		color: #f93d3d;
	}
}

.htmlBox {
	padding: 18upx 28upx 180upx 28upx;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	.parameterTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #202932;
	}
	.dtText {
		margin-bottom: 20upx;
		font-size: 32upx;
		color: #202932;
	}
}

.icon-gouwuche {
	font-size: 48upx;
}
.rIcon {
	font-size: 44upx;
	font-weight: normal;
	margin-left: 20upx;
	width: 70upx;
	height: 70upx;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	line-height: 70upx;
	border-radius: 50%;
}
.lIcon {
	font-size: 44upx;
	font-weight: normal;
	width: 70upx;
	height: 70upx;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	line-height: 70upx;
	border-radius: 50%;
}
.daojishibox {
	width: 100%;
	height: 120rpx;
	// background-color: red;
	background-image: url(../static/daojishibox.png);
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
	.leftbox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		.bottomnum {
			border: 1px solid #fff;
			border-radius: 5rpx;
			display: flex;
			font-size: 18rpx;
			width: 80rpx;
			.pinnum {
				flex: 2;
				background-color: #fff;
				text-align: center;
			}
			.renmun {
				flex: 3;
				text-align: center;
			}
		}
	}
	.rightbox {
		display: flex;
		align-items: center;
		.daojishibtn {
			width: 385rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: #fff100;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;

			.time {
				width: 45rpx;
				height: 45rpx;
				background-color: red;
				text-align: center;
				border-radius: 5rpx;
				text {
					line-height: 45rpx;
					color: #fff;
				}
			}
			.maohao {
				width: 25rpx;
				height: 45rpx;
				text-align: center;
				text {
					color: red;
					line-height: 45rpx;
				}
			}
			.end {
				margin-right: 15rpx;
				height: 45rpx;
				text-align: center;
				text {
					color: #4e4e4e;
					line-height: 45rpx;
					font-weight: bold;
					// font-size: 32rpx;
				}
			}
		}
	}
}
.ptnum {
	width: 100%;
	// height: 355rpx;
	background-color: #fff5eb;
	margin-bottom: 13rpx;

	.topnum {
		height: 85rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid #f8bd5e;
		align-items: center;
	}
	.bottomnum {
		width: 100%;
		padding: 0 20rpx;
		.userlist {
			display: flex;
			justify-content: space-between;
			height: 125rpx;
			.userleft {
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}
			.userright {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.cantuan {
					width: 200rpx;
					height: 50rpx;
					border-radius: 50rpx;
					background-color: red;
					color: #fff;
					text-align: center;
					margin-left: 18rpx;
				}
			}
		}
	}
}

.tankuangbox {
	width: 550rpx;
	height: 700rpx;
	background-color: #fef9fb;
	border-radius: 10rpx;
	position: relative;
	.cbox {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #dedede;
		border-radius: 50%;
		text-align: center;
		text {
			line-height: 50rpx;
			font-size: 25rpx;
			font-weight: bold;
		}
	}
	.tankuangtop {
		background-color: #fff;
		width: 100%;
		height: 90rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		text-align: center;
		text {
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #4e4e4e;
		}
	}
	.bottomnum {
		width: 100%;
		padding: 0 20rpx;
		
		.userlist {
			display: flex;
			justify-content: space-between;
			height: 125rpx;
			.userleft {
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}
			.userright {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.cantuan {
					width: 165rpx;
					height: 50rpx;
					border-radius: 50rpx;
					background-color: red;
					color: #fff;
					text-align: center;
					margin-left: 18rpx;
				}
			}
		}
	}
}
</style>
